<template>
	<view class="evaluation-center">
		<view class="evaluation-box">
			<view class="evaluation-title">服务满意度打分</view>
			<view style="padding-top: 30rpx;display: flex; align-items: center;">
				<view>维修服务<span style="color: red;">*</span></view>
				<u-rate size="20" @change="handerRate" activeColor="#ffa500" :count="count" v-model="value"></u-rate>
				<view style="font-size: 20rpx;padding-left: 10rpx;color: gray">{{text}}</view>
			</view>
			<view>
				根据您最近一次售后服务体验，您有多大可能把美的家电推荐给朋友或同事?<span style="color: red;">*</span>
			</view>
			<view style="display: flex; justify-content: space-around;">
				<view class="evaluation-sort" @click="sort(index)" v-for="(item, index) in 10" :key="index" :index="index">
					{{index}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 0,
				text:""
			}
		},
		methods: {
			sort(index){
				console.log(index);
			},
			handerRate(index){
				console.log(index)
				if(index==1 || index ==2){
					this.text="不推荐"
				}else if(index==3 || index ==4){
					this.text="满意"
				}else if(index==5){
					this.text="非常满意"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluation-title{
		font-size: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid gray;
	}
	.evaluation-box{
		background-color: white;
		padding: 30rpx;
		border-radius: 25rpx;
	}
	.evaluation-center{
		padding: 30rpx;
	}
	.evaluation-sort{
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border: 2rpx solid gainsboro;
		margin-top: 20rpx;
	}
</style>
